<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    单标签：input 
    块级元素：form
    行内元素:input
    <span>before</span>
    <form action="./jd/index.jsp" method="post" enctype="application/x-www-form-urlencoded"><!-- action中写的是请求的ul地址，1.绝对地址，2.相对地址-->
         
        <label>文本框：<input name="username" type="text"><br></label><!--使其自动跳转文本框-->
        <label for="pwd">密码框:</label>
        <input type="password" id="pwd"><br> <!--label+for的使用使其自动跳转文本框-->
        文本框：<input name="username" type="text"><br>
        密码框：<input name="pwd" type="password"><br>
         提交按钮：<input type="submit" value="登录">
         重置按钮：<input type="reset" value="清空"><!--清空-->
    </form>
    标签页
    第二个表单：
    value的使用：
        如果是用户填写，不需要写value属性
        如果想要默认值、控件是选择的没有填写的地方，就写value的属性
    <form action="/login.do" method="post" enctype="multipart/form-data">
        <input type="hidden" name="action" value="add">
        <input type="hidden" name="action" value="200"><!--上传服务器（后台）-->
    <table>
        <tr>
            <td>
                编号：
            </td>
            <td>
                <input type="text" name="id" value="2357" disabled><br><!--disabled不需要提交后台-->
            </td>
            <td>
                姓名：
            </td>
            <td>
                <input type="text" name="name" value="张三" readonly><!--readonly只是让别人进行可读-->
            </td>
        </tr>
        <tr>
            <td>价格：</td>
            <td>
                <input type="text" name="price" value="10.1" placeholder="默认提示内容：请输入两位小数的数字"><!--placeholder="默认提示内容：请输入两位小数的数字"-->
            </td>
        </tr>
        <tr>
            <td>
                性别
            </td>
            <td>
                <label>
                   <input type="radio" name="gender" value="male">男<!--取同一个名字，使用radio实现单选-->
                </label> <!--不管点击汉字还是控件都会使其聚焦在控件-->
                <input id="female" type="radio" name="gender" value="female"><label for="female" checked>女</label>
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td>
                <input type="checkbox" name="hobbits" value="basketball">篮球
                <input type="checkbox" name="hobbits" value="football">足球
                <input type="checkbox" name="hobbits" value="pingpangball" checked>乒乓球<!--默认被选中checked-->
            </td>
        </tr>
        <tr>
            <td>头像：</td>
            <td>
                <input type="file" name="face">
            </td>
        </tr>
        <tr>
            <td>地址：</td><!--介绍下拉菜单select控件-->
            <td>
                <select name="address">
                    <option>江苏省</option>
                    <option value="sx">山西省</option>
                    <option value="hn" selected>湖南省</option>
                </select>
                <select name="city" multiple><!--multiple表示可以多选-->
                    <option>太原市</option>
                    <option value="sx">长治市</option>
                    <option value="hn">大同市</option>
                </select>
                <select name="ad">
                    <optgroup label="山西省"><!--label分组展示-->
                        <option>太原市</option>
                        <option value="sx">长治市</option>
                        <option value="hn">大同市</option>
                    </optgroup>
                    <optgroup label="陕西省">
                        <option>西安市</option>
                        <option value="sx">宝鸡市</option>
                        <option value="hn">西安市</option>
                    </optgroup>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我介绍：</td>
            <td>
                <textarea name="introduce"  rows="5" cols="10" wrap="soft"><!--wrap换行，默认soft-->
                    默认值<!--不需要写value-->
                </textarea>    <!--textarea文本框-->      
            </td>
        </tr>
        <tr>
            <td><input type="submit" value="提交"></td>
            <td><input type="reset" value="清空"></td>
        </tr>
    </table>
    </form>
    <iframe src="3-form.html"></iframe><!--多用于插件-->
    <iframe src="插件地址"></iframe>
    ===============<br>
    <progress value="0.6" max="1"></progress>60%<!--进度条展示-->
    <form oninput="result.value=scroe.value">
        <input type="range" name="scroe" value="10"><!--range进度条游标可滑动，result加上js交互可改变游标移动结果-->
        <output name="result">10</output>
    </form>
    <meter min="0" max="1024" low="200" high="999" value="1024"></meter>
    标签库的使用
    地址：<input type="text" name="address">
    <datalist id="dl"><!--默认不显示，输入文本时自动提示-->
        <option value="js">江苏省</option>
        <option>山西省</option>
        <option>陕西省</option>
    </datalist>
    谷歌浏览器打开：
    number<input type="number">
    time<input type="time">
    color<input type="color">
    date<input type="date">
    email<input type="email">
    多表单多地址的提交
    表单一：
    <form id="f1" action="a1" method="get">
        <input type="text" name="n1" value="v1">
        <input type="submit" >
    </form>
    表单二：
    <form id="f2" action="a2" method="get">
        <input type="text" name="n2" value="v2">
        <input type="submit" value="编辑" >
        <input type="submit" value="新增" formaction="a3" formmethod="get" form="f1">
    </form>
    <input type="text" name="n3" value="v3" form="f1">
    <input type="submit" formaction="a3" formmethod="get" form="f1">
    <span>end</span>
</body>
</html>